#include("/template/common/layout/_page_layout.html") 
#@layout() 
#define css()
<!--Bootstrap Datepicker [ OPTIONAL ]-->
<link
	href="#(RESOURCE_HOST)/static/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css"
	rel="stylesheet">
#end 
#define js()

<!--X-editable [ OPTIONAL ]-->
<script src="#(RESOURCE_HOST)/static/plugins/echarts/echarts.min.js"></script>

<!--Bootstrap Datepicker [ OPTIONAL ]-->
<script
	src="#(RESOURCE_HOST)/static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

<!--Bootstrap Datepicker [ OPTIONAL ]-->
<script
	src="#(RESOURCE_HOST)/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>

<script src="#(RESOURCE_HOST)/static/plugins/moment/moment.js"></script>

<script src="#(RESOURCE_HOST)/static/js/qjob/qjob.main.js"></script>

#end 
#define content()
<!--<div id="container" >-->
<!--<div class="boxed">-->
<!--CONTENT CONTAINER-->
<!--===================================================-->
<!--<div id="content-container">-->

<div id="page-content">

	<div class="row">

		<div id="job-panel-ref" class="panel">

			<!--Panel heading-->
			<div class="panel-heading">
				<div class="panel-control">
					<button id="refreshCount" class="job-panel-ref-btn btn btn-default"
						data-target="#job-panel-ref" data-toggle="panel-overlay">
						<i class="demo-psi-repeat-2 icon-fw"></i>#(_res.get("joblog_rolling_log_refresh"))
					</button>
					<!--<ul class="pager pager-rounded">
                        <li><a href="#">#(_res.get("joblog_rolling_log_refresh"))</a></li>
                    </ul>-->
				</div>
				<h3 class="panel-title">#(_res.get("job_dashboard_name"))</h3>
			</div>

			<!--Panel body-->
			<div class="panel-body" style="padding: 15px">
				<!--Tile-->
				<!--===================================================-->
				<div class="col-md-4">
					<div class="panel panel-success panel-colorful">
						<div class="pad-all media">
							<div class="media-left">
								<i class="demo-pli-male icon-3x icon-fw"></i>
							</div>
							<div class="media-body">
								<p id="jobInfoCount" class="h3 text-light mar-no media-heading">
									#(dashboard.jobInfoCount)</p>
								<span>#(_res.get("job_dashboard_job_num"))</span>
							</div>
						</div>
						<div class="progress progress-xs progress-success mar-no">
							<div role="progressbar" aria-valuenow="30" aria-valuemin="0"
								aria-valuemax="100" class="progress-bar progress-bar-light"
								style="width: 30%"></div>
						</div>
						<div class="pad-all text-lg">
							<!--<span class="text-semibold">30%</span> Higher than yesterday-->
							<span class="text-semibold">#(_res.get("job_dashboard_job_num_tip"))</span>
						</div>
					</div>
				</div>
				<!--===================================================-->


				<!--Tile-->
				<!--===================================================-->
				<div class="col-md-4">
					<div class="panel panel-info panel-colorful">
						<div class="pad-all media">
							<div class="media-left">
								<i class="demo-pli-add-cart icon-3x icon-fw"></i>
							</div>
							<div class="media-body">
								<p id="jobLogCount" class="h3 text-light mar-no media-heading">
									#(dashboard.jobLogCount)</p>
								<span>#(_res.get("job_dashboard_trigger_num"))</span>
							</div>
						</div>
						<div class="progress progress-xs progress-dark-base mar-no">
							<div role="progressbar" aria-valuenow="100" aria-valuemin="0"
								aria-valuemax="100" class="progress-bar progress-bar-light"
								style="width: 75%"></div>
						</div>
						<div class="pad-all text-lg bg-trans-dark">
							<!--<span class="text-semibold">954</span> Sales in this month-->
							<span class="text-semibold">#(_res.get("job_dashboard_trigger_num_tip"))</span>
						</div>
					</div>
				</div>
				<!--===================================================-->


				<!--Tile-->
				<!--===================================================-->
				<div class="col-md-4">
					<div class="panel panel-primary panel-colorful">
						<div class="pad-all media">
							<div class="media-left">
								<i class="demo-pli-add-cart icon-3x icon-fw"></i>
							</div>
							<div class="media-body">
								<p id="executorCount" class="h3 text-light mar-no media-heading">
									#(dashboard.executorCount)</p>
								<span>#(_res.get("job_dashboard_jobgroup_num"))</span>
							</div>
						</div>
						<div class="progress progress-xs progress-dark-base mar-no">
							<div role="progressbar" aria-valuenow="100" aria-valuemin="0"
								aria-valuemax="100" class="progress-bar progress-bar-light"
								style="width: 100%"></div>
						</div>
						<div class="pad-all text-lg bg-trans-dark">
							<!--<span class="text-semibold">954</span> Sales in this month-->
							<span class="text-semibold">#(_res.get("job_dashboard_jobgroup_num_tip"))</span>
						</div>
					</div>
				</div>
				<!--===================================================-->
			</div>
		</div>

	</div>

	<div class="row">

		<div id="echart-panel-ref" class="panel">

			<!--Panel heading-->
			<div class="panel-heading">
				<div class="panel-control">
					<button id="refreshChart"
						class="echart-panel-ref-btn btn btn-default"
						data-target="#echart-panel-ref" data-toggle="panel-overlay">
						<i class="demo-psi-repeat-2 icon-fw"></i>#(_res.get("joblog_rolling_log_refresh"))
					</button>
					<div class="btn-group">
						<button data-toggle="dropdown" class="dropdown-toggle btn">
							<i class="pli-arrow-down icon-fw"></i>#(_res.get("daterangepicker_more"))
						</button>
						<button class="dropdown-menu dropdown-menu-right">
							<li><a href="javascript:void(0)" onclick="filterDate(this)"
								id="today">#(_res.get("daterangepicker_ranges_today"))</a></li>
							<li><a href="javascript:void(0)" onclick="filterDate(this)"
								id="yesterday">#(_res.get("daterangepicker_ranges_yesterday"))</a>
							</li>
							<li><a href="javascript:void(0)" onclick="filterDate(this)"
								id="this_month">#(_res.get("daterangepicker_ranges_this_month"))</a>
							</li>
							<li><a href="javascript:void(0)" onclick="filterDate(this)"
								id="last_month">#(_res.get("daterangepicker_ranges_last_month"))</a>
							</li>
							<li><a href="javascript:void(0)" onclick="filterDate(this)"
								id="recent_week">#(_res.get("daterangepicker_ranges_recent_week"))</a>
							</li>
							<li><a href="javascript:void(0)" onclick="filterDate(this)"
								id="recent_month">#(_res.get("daterangepicker_ranges_recent_month"))</a>
							</li>
							<li class="divider"></li>
							<li><a href="#demo-default-modal"
								data-target="#demo-default-modal" data-toggle="modal">#(_res.get("daterangepicker_custom_name"))</a></li>
						</button>
					</div>
				</div>
				<h3 class="panel-title">#(_res.get("job_dashboard_report"))</h3>
			</div>

			<!--Panel body-->
			<div class="panel-body" style="padding: 15px">
				<div id="lineECharts" class="col-md-8" style="height:400px;">
				</div>
				<div id="pieECharts" class="col-md-4" style="height:400px;"></div>
			</div>
		</div>

	</div>
</div>
<!--===================================================-->
<!--End page content-->
<!--</div>-->

<!--</div>-->

<button class="scroll-top btn">
	<i class="pci-chevron chevron-up"></i>
</button>


<!--Default Bootstrap Modal-->
<!--===================================================-->
<div class="modal fade" id="demo-default-modal" role="dialog"
	tabindex="-1" aria-labelledby="demo-default-modal" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">

			<!--Modal header-->
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">
					<i class="pci-cross pci-circle"></i>
				</button>
				<h4 class="modal-title">#(_res.get("daterangepicker_custom_name"))</h4>
			</div>

			<!--Modal body-->
			<div class="modal-body">
				<div class="row">

					<!--Bootstrap Datepicker : Range-->
					<!--===================================================-->
					<div id="demo-dp-range">
						<div class="input-daterange input-group" data-date-format="yyyy-mm-dd" id="datepicker">
							<span class="input-group-addon">#(_res.get("daterangepicker_custom_starttime"))</span>
							<input type="text" class="form-control" name="start" value="2018-07-01" />
							<!--  <span class="input-group-addon">to</span> -->
							<span class="input-group-addon">#(_res.get("daterangepicker_custom_endtime"))</span>
							<input type="text" class="form-control" name="end" value="2018-08-22" />
						</div>
					</div>
					<!--===================================================-->
				</div>
			</div>

			<!--Modal footer-->
			<div class="modal-footer">
				<button id='comfirm' class="btn btn-primary">#(_res.get("system_ok"))</button>
			</div>
		</div>
	</div>


</div>
</div>
</div>
<!--===================================================-->
<!--End Default Bootstrap Modal-->
#end
